<!doctype html>

<html>

<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

  <title>Basis Demos: Entity user list</title>

  <link rel="stylesheet" type="text/css" title="Default Style" href="../../style/tree/compat/style.css" media="screen" />

  <style id="demo-css" type="text/css">
    HTML,
    BODY
    {
      width: 100%;
      margin: 0;
      padding: 0;
      font-size: small;
      font-family: Tahoma, Verdana, Arial, sans-serif;
    }

    #UserList
    {
      margin: 10px;
      height: 450px;
      width: 300px;
      overflow: auto;
      border: 1px solid #888;
      position: relative;
    }
    #UserList .user
    {
      margin: 1px;
      padding: .2em .5ex;
    }
    #UserList .user:hover
    {
      background: #E8E8E8;
    }
    #UserList .selected
    {
      background: gold !important;
    }

    .Basis-Label-Processing
    {
      position: absolute;
      top: 2px;
      left: 2px;
      background: gold;
      font-size: 85%;
      padding: 2px 4px;
      border-radius: 4px;
        -moz-border-radius: 4px;
    }
    .PartitionNode-Title
    {
      border-top: 1px solid #888;
      background: #E0E0E0;
      border-bottom: 1px solid #888;
      padding: .5ex .2em;
    }

    TEXTAREA
    {
      width: 60%;
      height: 8em;
    }
  </style>
  <!--[if lt IE 7]>
  <style type="text/css">
    BODY,
    TABLE *
    {
      font-size: x-small;
    }
  </style>
  <![endif]-->

  <!--[if IE 7]>
  <![endif]-->


  <script type="text/javascript" src="../../basis-all.js"></script>

  <script type="text/javascript" src="../demo.js"></script>
</head>

<body>
  <h1>Basis Demos: Entity user list</h1>

  <p id="demo-summary">
    ...
  </p>
  <div id="demo-description">
    <p>...</p>
  </div>

  <div id="demo-container"></div>

  <script id="demo-javascript" type="text/javascript">
    //
    // import names
    //

    var Data = basis.data;
    var DOM = basis.dom;

    var nsUI = basis.ui;
    var nsEntity = basis.entity;
    var nsTree = basis.ui.tree;
    var nsLabel = basis.ui.label;

    var STATE = basis.data.STATE;

    var demoContainer = DOM.get('demo-container');

    //
    // reusable handlers
    //

    var colHandler = {
      subscribersChanged: function(){
        if (this.subscriberCount && (this.state == STATE.UNDEFINED || this.state == STATE.DEPRECATED))
          this.adapter.get();
      },
      stateChanged: function(){
        if (this.subscriberCount && (this.state == STATE.UNDEFINED || this.state == STATE.DEPRECATED))
          this.adapter.get();
      }
    };
    var adapterHandler = {
      success: function(request){
        var data = request.responseText.toObject();
        this.sync(data && data.map(this.wrapper.reader));
      }
    };

    // define data types

    var UserGroup = new nsEntity.EntityType({
      name: 'UserGroup',
      fields: {
        groupId: nsEntity.IntId,
        title: String
      },
      all: {
        handler: colHandler,
        init: function(config){
          this.constructor.prototype.init.call(this, config);
          this.adapter = new basis.net.ajax.Transport({
            url: '../res/data/groups.json',
            influence: [this],
            handler: adapterHandler,
            handlerContext: this
          });
        }
      }
    });

    var User = new nsEntity.EntityType({
      name: 'User',
      fields: {
        userId: nsEntity.IntId,
        group: UserGroup,
        title: String
      },
      aliases: {
        groupId: 'group'
      },
      all: {
        handler: colHandler,
        init: function(config){
          this.constructor.prototype.init.call(this, config);
          this.adapter = new basis.net.ajax.Transport({
            url: '../res/data/users.json',
            influence: [this],
            handler: adapterHandler,
            handlerContext: this
          });
        }
      }
    });

    // create sync adapters

    //UserGroup.all.addHandler(colHandler);
    /*UserGroup.all.adapter = new Basis.Ajax.Transport({
      url: '../res/data/groups.json',
      influence: UserGroup.all,
      handler: adapterHandler,
      handlerContext: UserGroup.all
    });*/

    //User.all.addHandler(colHandler);
    /*User.all.adapter = new Basis.Ajax.Transport({
      url: '../res/data/users.json',
      influence: User.all,
      handler: adapterHandler,
      handlerContext: User.all
    }); */

    // create controls

    DOM.insert(demoContainer, DOM.createElement({
      description: 'BUTTON',
      click: function(){
        UserGroup.all.deprecate();
        User.all.deprecate();
      }
    }, 'Update'));

    //
    // User list
    //

    var tree = new nsUI.Container({
      id: 'UserList',
      container: demoContainer,

      active: true,
      dataSource: User.all,

      selection: {
        multiple: true
      },

      childClass: {
        template:
          '<div class="user {selected}" event-click="select">' +
            '{title}' +
          '</div>',

        binding: {
          title: 'data:'
        },

        action: {
          select: function(event){
            this.select(basis.dom.event(event).ctrlKey);
          }
        }
      },

      sorting: 'data.title',
      grouping: {
        active: true,
        dataSource: UserGroup.all,

        groupGetter: 'data.group',
        sorting: 'data.title',

        childClass: {
          template:
            '<div class="PartitionNode" event-click="selectAll">' +
              '<div class="PartitionNode-Title">{title}</div>' +
              '<!-- {childNodeHere} -->' +
            '</div>',

          binding: {
            title: 'data:'
          },

          action: {
            selectAll: function(){
              this.parentNode.owner.selection.set(this.nodes);
            }
          }
        }
      }
    });

    new nsLabel.DataSourceProcessing({
      delegate: tree
    });

  </script>
</body>

</html>
